<template>
	<w-container>
		<view class="userInfo">
			<view class="flex flex-center-sb">
				<!-- <u-avatar :src="avatar" size='64'></u-avatar> -->
				<view style="border: 5rpx solid #fff; border-radius:128rpx;margin-right: 24rpx;">
					<w-image src="/static/icon/avatar.png" width="64" height="64"></w-image>
				</view>
				<view class="right">
					<block v-if="isLogin">
						<view class="font-size-20 font-w-bold font-color-white">{{ userInfo.nickname }}</view>
						<view class="flex flex-ai-center font-size-12 mt-8 font-color-white">
							<text style="flex-shrink: 0;">钱包地址：</text>
							<block v-if="userInfo.ntf_url">
								<text class="mr-4 text-overflow">{{ userInfo.ntf_url || '*******拥有藏品后自动生成******' }}</text>
								<w-icon name="copy-white" :size="12" @click='copyText'></w-icon>
							</block>
							<text v-else>*******拥有藏品后自动生成******</text>
						</view>
					</block>
					<view class="font-size-20 font-w-500 font-color-white" @click="$u.route('/pages/login/login')" v-else>请登录</view>
				</view>
			</view>
		</view>
		<view class="plr-15 bg-color-white">
			<view class="menuList">
				<view v-for="(item,idx) in menuList" :key="idx" class="flex-center" @click="toPage(item.path)">
					<w-icon :name="item.icon" :size="22"></w-icon>
					<text class="ml-5 font-size-14 font-w-500">{{ item.name }}</text>
				</view>
			</view>
			<view class="myTypeArray mb-10">
				<u-tabs :list="myTypeArray" keyName="name" lineColor="#1952F8" :lineWidth="57" :lineHeight="4" inactiveStyle="color:#999999;font-size:32rpx;" activeStyle="color:#000;font-weight: 500;font-size:32rpx;" @click="handMyType"></u-tabs>
			</view>
			<view class="flex-center-sb mb-10" v-if="param.types!=3">
				<view class="myCollectionType">
					<view 
					v-for="item in myCollectionType" 
					:key="item.type" 
					:class="{action:param.types==item.type}"
					@click="param.types=item.type;refresh()">{{ item.name }}</view>
				</view>
				<view class="flex flex-ai-center">
					<view @click="changeHecheng" class="flex flex-ai-center mr-17">
						<w-icon :name="param.can_compound == 1?'checked':'check'" size="16"></w-icon>
						<view class="font-size-14 font-w-500 ml-4">{{ param.can_compound == 1?'可合成':"不可合成" }}</view>
					</view>
					<w-icon name="search3" :size="18" @click="$u.route('/pages/myCollection/myCollection')"></w-icon>
				</view>
			</view>
			
			<view class="flex flex-js-sb flex-w plr-2">
				<collectionItem v-for="(item,idx) in list" :key="idx" :item="item" :types="param.types" @click="openPop(item)"></collectionItem>
			</view>
			<!-- 加载 -->
			<w-loading :type="loadingType" emptyType="myCollection" class="mt-25"></w-loading>
		</view>
		<!-- 弹窗详情 -->
		<popDetails v-model="showPop" :id="collection_id" :types="param.types"></popDetails>
		<!-- <w-tabbar :value="2"></w-tabbar> -->
	</w-container>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import Collection from "./components/Collection.vue";
	import collectionItem from '@/pages/myCollection/components/collectionItem.vue';
	import popDetails from '@/pages/myCollection/components/popDetails.vue';
	import {
		antMycollection
	} from '@/api/collection/index.js';
	import {
		OriginOssUrl
	} from "@/config/index.js"

	export default {
		components: {
			Collection,
			collectionItem,
			popDetails
		},
		data() {
			return {
				loadingType: 'none',
				loading: false,
				showPop: false,
				isNext: true,
				list: [],
				param: {
					types: 2, //1盲盒 2藏品 3已售出
					page: 1,
					can_compound:0  //1是可合成，0是不能合成
				},
				collection_id:'',
				menuList: [
					{
						name:'我的订单',
						icon:'my-order',
						path:'/pages/order/list'
					},
					{
						name:'我的钱包',
						icon:'my-wallet',
						path:'/pages/wallet/wallet'
					},
					{
						name:'设置中心',
						icon:'my-setting',
						path:'/pages/my/info'
					}
				],
				
				myTypeArray:[
					{ type:2,name:'持有资产' },
					{ type:3,name:'售出资产' }
				],
				myCollectionType:[
					{ type:2,name:'藏品' },
					{ type:1,name:'盲盒' }
				]
			};
		},

		computed: {
			avatar() {
				if (this.userInfo.avatar) {
					return this.$ossUrl + this.userInfo.avatar
				}
				return;
			}
		},
		onShow() {
			this.getUserInfo()
			this.refresh()
		},
		methods: {
			...mapActions('user', ['getUserInfo']),

			copyText() {
				this.$tools.copyText(this.userInfo.ntf_url)
			},
			
			toPage(url) {
				if (!this.isLogin) {
					uni.$emit('showLogin')
					return;
				}
				uni.navigateTo({ url })
			},
			
			handMyType(e) {
				this.param.types = e.type;
				this.refresh()
			},

			// 刷新
			refresh() {
				this.loadingType = 'none'
				this.showPop = false
				this.isNext = true
				this.list = []
				this.param.page = 1
				this.getList()
			},
			
			changeHecheng(){
				this.param.can_compound = this.param.can_compound == 1?0:1
				this.refresh()
			},

			// tab切换
			changetab(e) {
				this.isNext = true;
				this.list = [];
				this.param.types = e.types;
				this.param.page = 1;
				this.getList();
			},

			// 获取列表
			getList() {
				if (!this.isNext || this.loadingType == 'loading') return;
				this.loadingType = 'loading';
				antMycollection(this.param).then(res => {
					let {
						data,
						last_page
					} = res.data;
					this.list = [...this.list, ...data];
					if (this.param.page < last_page) {
						this.param.page++;
					} else {
						this.isNext = false;
						this.loadingType = 'nomore';
					}
				}).catch(() => {
					this.loadingType = 'none';
				}).finally(()=>{
					uni.stopPullDownRefresh()
					!this.list.length && (this.loadingType = 'empty');
				})
			},

			// 弹窗详情
			openPop(item) {
				if (this.param.types == 3) return;
				this.collection_id = item.collection.id;
				this.showPop = true;
			}
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.userInfo {
		width: 750rpx;
		height: 406rpx;
		padding: 200rpx 32rpx 0;
		@include ossBg('/static/bg/page-my-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		
		.right {
			width: calc(100% - 136rpx);
		}
	}
	.menuList {
		width: 100%;
		display: flex;
		justify-content: space-between;
		>view{
			width: 222rpx;
			height: 88rpx;
			background-color: #F5F5F5;
			border-radius: 16rpx;
		}
	}
	.myTypeArray {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: -30rpx;
			width: calc(100% + 60rpx);
			height: 2rpx;
			background-color: #F5F5F5;
		}
		/deep/.u-tabs__wrapper__nav__line {
			bottom: 0;
		}
	}
	
	.myCollectionType {
		background-color: #F5F5F5;
		border-radius: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4rpx;
		>view{
			width: 90rpx;
			height: 46rpx;
			color: #999;
			font-size: 28rpx;
			text-align: center;
			line-height: 46rpx;
			font-weight: 500;
		}
		.action {
			background-color: #fff;
			color: $theme-color;
			font-weight: 500;
			border-radius: 64rpx;
			box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
		}
	}
</style>